<template>
  <view>
    <view
      class="list"
      :class="boxBorder === true ? 'list_box_boxshow list' : 'list'"
      @click.stop="jumptabCard"
      v-if="item.contentSubType != 41 && item.contentSubType != 42"
    >
      <view class="topcard">
        <view class="topcard_img_box">
          <image
            :src="item.covers[0].fileUrl"
            mode="widthFix"
            class="lgimage"
          />
        </view>
        <image
          class="iconccc"
          :src="topimg[Number(item.type) - 1]"
          mode="widthFix"
        ></image>
        <view
          @click.stop.self="likeCardBox"
          class="likeicon_box"
          v-if="showLikeIcon"
        >
          <image
            class="likeicon"
            :src="like[likeIndex]"
            mode="widthFix"
          ></image>
        </view>
        <view
          class="live_state"
          v-if="item.contentType == 8"
          :style="[
            {
              backgroundColor:
                item.status == 2 ? 'rgba(255,0,0,1)' : 'rgba(36,36,36,1)',
            },
          ]"
        >
          <view v-if="item.status == 2">
            <view class="liveing"> </view>
            <text>直播中</text>
          </view>
          <text v-else-if="item.status == 3">直播回放</text>
        </view>
      </view>
      <text
        :class="boxBorder === true ? 'padding_box center-text' : 'center-text'"
        :style="[{ marginBottom: item.contentType == 8 ? '24rpx' : '30rpx' }]"
        >{{ item.title }}</text
      >
      <view
        :class="boxBorder === true ? 'padding_box botton-text' : 'botton-text'"
        @click.stop.self="jumpSearch(item)"
      >
        <image
          :src="item.category.icon"
          mode="widthFix"
          class="bott_img"
          v-if="item.contentType != 8"
        ></image>
        <text
          :style="[{ color: item.contentType == 8 ? '#ff0000' : '#757575' }]"
          >{{ item.category.name || item.name || item.liveTimes }}</text
        >
      </view>
    </view>

    <colorBox v-else :item="item"></colorBox>
  </view>
</template>

<script>
import colorBox from "../conpoments/gradientBox";
export default {
  props: {
    item: {
      type: [Object, Array],
      default: () => {},
    },
    likeType: {
      type: Number,
      default: 0,
    },
    showLikeIcon: {
      type: Boolean,
      default: true,
    },
    boxBorder: {
      type: Boolean,
      default: () => false,
    },
  },
  watch: {
    item(val) {
      console.log(val);
    },
  },
  data() {
    return {
      likeIndex: 0,
      like: [
        require("../static/img/axin_t.png"),
        require("../static/img/dzaixin.png"),
      ],
      topimg: [
        "",
        require("../static/img/wenzhang_y.png"),
        require("../static/img/pic.png"),
        "",
        require("../static/img/video.png"),
        "",
        "",
      ],
    };
  },
  methods: {
    jumptabCard() {
      let url = "";
      if (this.item.type == 2) {
        //图文
        url = `/pages/article/article?id=${this.item.id}&token=${
          uni.getStorageInfoSync("userInfo").token
        }`;
      } else if (this.item.type == 3) {
        //图集
        url = "/pages/photo/photo?id=" + this.item.id;
      } else if (this.item.type == 5) {
        //视频
        url = "/pages/video/video?id=" + this.item.id;
      } else if (this.item.contentSubType == 41) {
        //专题
        url = "/pages/picAtlas/picAtlas?id=" + this.item.id;
      } else if (this.item.type == 6) {
        //排行榜
        url = "/pages/crunchies/crunchies?id=" + this.item.id;
      } else if (this.item.type == 1) {
        return;
      } else if (this.item.contentType == 8) {
        url = "/pages/live/live?id=" + this.item.id;
      } else if (this.item.contentSubType == 42) {
        url = "/pages/crunchies/crunchies?id=" + this.item.id;
      }
      uni.navigateTo({
        url,
      });
    },
    likeCardBox() {
      this.likeIndex == 0 ? (this.likeIndex = 1) : (this.likeIndex = 0);
      this.$emit("likeCard", this.likeIndex, this.item);
    },
    jumpSearch(item) {
      console.log("跳转搜索");
      if (item.contentType == 8) return;
      uni.navigateTo({
        url:
          "/pages/findresults/findresults?search=" +
          (this.item.category.name || this.item.name),
      });
    },
  },
  components: {
    colorBox,
  },
  created() {
    this.likeIndex = this.likeType;
  },
};
</script>

<style scoped lang="scss">
.padding_box {
  padding-left: 20rpx;
  padding-right: 25rpx;
}

.list_box_boxshow {
  box-shadow: 0px 10rpx 8rpx 0px rgba(240, 240, 240, 1);
}

.list {
  display: flex;
  flex-direction: column;
  width: 328rpx;
  position: relative;
  .topcard {
    position: relative;
    border-radius: 14rpx;
    .topcard_img_box {
      position: relative;
      width: 100%;
      .lgimage {
        width: 328rpx;
        // height: auto;
        border-radius: 14rpx;
        position: relative;
        image-rendering: crisp-edges;
        &::after {
          content: "";
          z-index: 1;
          position: absolute;
          background: linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0) 100%
          );
          border-radius: 0px 0px 14rpx 14rpx;
          width: 100%;
          height: auto;
          left: 0;
          top: 0;
        }
      }
    }
    .iconccc {
      position: absolute;
      right: 23rpx;
      top: 24rpx;
      width: 40rpx;
      z-index: 99;
    }

    .likeicon {
      color: #fff;
      font-weight: bold;
      width: 32rpx;
    }

    .live_state {
      position: absolute;
      left: 0rpx;
      top: 0rpx;
      z-index: 99;
      background: rgba(255, 0, 0, 1);
      padding-left: 12rpx;
      padding-right: 12rpx;
      padding-top: 7rpx;
      padding-bottom: 6rpx;
      border-radius: 14rpx 0px 12rpx 0px;

      > view {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 30rpx;

        .liveing {
          background-image: url("../static/img/liveing.gif");
          background-position: center center;
          background-size: 200% 200%;
          background-repeat: no-repeat;
          width: 25rpx;
          height: 25rpx;
          margin-right: 12rpx;
        }
      }

      text {
        font-size: 18rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: rgba(254, 254, 254, 1);
        display: inline-block;
      }
    }
  }

  .center-text {
    width: 100%;
    display: block;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(36, 36, 36, 1);
    line-height: 38rpx;
    margin-top: 17rpx;
    margin-bottom: 30rpx;
    display: -webkit-box;
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .botton-text {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(117, 117, 117, 1);
    text-align: left;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 29rpx;
    > image {
      width: 26rpx;
      height: 26rpx;
      margin-right: 7rpx;
      vertical-align: middle;
    }
  }
}
.likeicon_box {
  width: 57rpx;
  height: 48rpx;
  position: absolute;
  bottom: 0rpx;
  right: 0rpx;
  z-index: 99;
}
</style>
